<template>
  <el-dialog title="充电参数设置" v-model="openAttr" :width="is_pc == true ? '500px' : '95%'" append-to-body @close="cancel"
    :close-on-click-modal="false">
    <el-form ref="formAttrRef" :model="formAttr" :rules="rulesAttr" label-width="120px">
      <el-form-item label="设备号">
        <span>{{ formAttr.sn }}</span>
      </el-form-item>
      <el-form-item label="最低浮充功率" prop="floatPow">
        <el-input-number v-model="formAttr.floatPow" />
        <span class="unit">瓦 (0-999)</span>
      </el-form-item>
      <el-form-item label="浮充时间" prop="floatTime">
        <el-input-number v-model="formAttr.floatTime" />
        <span class="unit">秒 (2-999)</span>
      </el-form-item>
      <el-form-item label="空载功率" prop="noLoadPow">
        <el-input-number v-model="formAttr.noLoadPow" />
        <span class="unit">瓦 (1-200)</span>
      </el-form-item>
      <el-form-item label="空载时间" prop="noLoadTime">
        <el-input-number v-model="formAttr.noLoadTime" />
        <span class="unit">秒 (1-999)</span>
      </el-form-item>
      <el-form-item label="电价" prop="elecPrice">
        <el-input-number :min="1" v-model="formAttr.elecPrice" />
        <span class="unit">分/度</span>
      </el-form-item>
      <!-- <el-form-item label="消费标准功率" prop="standardPow">
        <el-input-number v-model="formAttr.standardPow" />
        <span class="unit">瓦</span>
      </el-form-item> -->
      <el-form-item label="整机极限功率" prop="completeLimitPow" v-if="devVer != '104'">
        <el-input-number :min="0" :max="5000" v-model="formAttr.completeLimitPow" />
        <span class="unit">瓦 (0-5000)</span>
      </el-form-item>
      <el-form-item label="单路极限功率" prop="singleLimitPow" v-if="devVer != '104'">
        <el-input-number :min="0" :max="3000" v-model="formAttr.singleLimitPow" />
        <span class="unit">瓦 (0-3000)</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="DialogAttr">
import { getAttr, setAttr } from "@/api/equipment/control";
import { ElLoading } from "element-plus";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const openAttr = ref(false);
const devVer = ref(null)
const formAttr = ref({
  devId: undefined,
  sn: undefined,
  floatPow: undefined,
  floatTime: undefined,
  // standardPow: undefined,
  noLoadPow: undefined,
  noLoadTime: undefined,
  elecPrice: undefined,
  singleLimitPow: undefined,
  completeLimitPow: undefined,
});

// 表单校验
const rulesAttr = ref({
  floatPow: [
    { required: true, message: "最低浮充功率不能为空", trigger: "blur" },
  ],
  floatTime: [
    { required: true, message: "浮充时间不能为空", trigger: "blur" },
  ],
  // standardPow: [
  //   { required: true, message: "消费标准功率不能为空", trigger: "blur" },
  // ],
  elecPrice: [
    {
      required: true,
      message: "电价不能为空",
      trigger: "blur",
    },
  ],
  noLoadPow: [
    {
      required: true,
      message: "充电器移除功率不能为空",
      trigger: "blur",
    },
  ],
  noLoadTime: [
    {
      required: true,
      message: "充电器移除时间不能为空",
      trigger: "blur",
    },
  ],
  singleLimitPow: [
    { required: true, message: "单路极限功率不能为空", trigger: "blur" },
  ],
  completeLimitPow: [
    { required: true, message: "整机极限功率不能为空", trigger: "blur" },
  ],
})
const is_pc = ref(true)


function getCollapse() {
  const screenWidth = window.innerWidth;
  if (screenWidth < 768) {
    is_pc.value = false;
  } else {
    is_pc.value = true;
  }
}

// 页面宽度变化时
window.onresize = () => {
  getCollapse();
};

function open(id, sn, version) {
  devVer.value = version
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在查询",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getAttr(sn)
    .then((response) => {
      loadingInstance.close();
      if (response.code == 0) {
        if (response.data) {
          openAttr.value = true;
          formAttr.value = response.data;
          // 单位转换
          formAttr.value.elecPrice =
            formAttr.value.elecPrice / 100;
        }
        formAttr.value.devId = id;
        formAttr.value.sn = sn;
      }
    })
    .catch((error) => {
      loadingInstance.close();
      formAttr.value.devId = id;
      formAttr.value.sn = sn;
    });
}

// 暴露出去
defineExpose({
  open,
})

// 取消按钮
function cancel() {
  openAttr.value = false;
  reset();
}

function // 表单重置
  reset() {
  formAttr.value = {
    devId: undefined,
    sn: undefined,
    floatPow: undefined,
    floatTime: undefined,
    // standardPow: undefined,
    noLoadPow: undefined,
    noLoadTime: undefined,
    elecPrice: undefined,
    singleLimitPow: undefined,
    completeLimitPow: undefined,
  };
  proxy.resetForm("formAttrRef");
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["formAttrRef"].validate((valid) => {
    if (valid) {
      let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在设置",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setAttr({
        devId: formAttr.value.devId,
        sn: formAttr.value.sn,
        floatPow: formAttr.value.floatPow,
        floatTime: formAttr.value.floatTime,
        // standardPow: undefined,
        noLoadPow: formAttr.value.noLoadPow,
        noLoadTime: formAttr.value.noLoadTime,
        elecPrice: formAttr.value.elecPrice * 100,
        singleLimitPow: devVer.value == '104' ? formAttr.value.singleLimitPow : undefined,
        completeLimitPow: devVer.value == '104' ? formAttr.value.completeLimitPow : undefined,
      })
        .then((response) => {
          loadingInstance.close();
          if (response.code == 0) {
            proxy.$modal.notifySuccess("修改成功");
            cancel();
            if (reload.value) reload();
          }
        })
        .catch((error) => {
          loadingInstance.close();
        });
    }
  });
}
</script>

<style scoped>
.unit {
  margin-left: 10px;
}
</style>
